<div class="card">
  <div class="image">
		<svg xml:space="preserve" viewBox="0 0 456 456" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1">
		<g>
			<path d="M8,230.627v56h66.918C69.232,254.838,41.4,230.627,8,230.627z" style="fill:#ac646b;"></path>
			<path d="M83.044,286.627H448v-2.542c0-7.779-5.595-14.431-13.259-15.763L264,238.627l-15.181-15.181
				c-0.228,0.227-0.476,0.438-0.764,0.611l-24.061,14.437c0.001,0.045,0.007,0.089,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8
				s3.582-8,8-8c1.41,0,2.733,0.368,3.883,1.008l23.203-13.922l-10.336-10.336c-0.275,0.323-0.592,0.617-0.976,0.848l-23.78,14.269
				c0.001,0.045,0.007,0.088,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.368,3.883,1.008l23.203-13.922
				l-10.231-10.231c-0.193,0.175-0.404,0.334-0.636,0.473l-24.226,14.538c0.001,0.045,0.007,0.089,0.007,0.134c0,4.418-3.582,8-8,8
				s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.367,3.882,1.008l23.202-13.924l-10.334-10.334c-0.275,0.323-0.592,0.617-0.976,0.848
				l-23.78,14.269c0.001,0.045,0.007,0.088,0.007,0.134c0,4.418-3.582,8-8,8s-8-3.582-8-8s3.582-8,8-8c1.41,0,2.732,0.368,3.883,1.008
				l23.203-13.922L176,150.627l-19.314-19.314c-2.588-2.588-6.784-2.588-9.373,0c-6.248,6.248-6.248,16.379,0,22.627l2.84,2.84
				L20.294,187.7C13.087,189.416,8,195.856,8,203.265v19.362C45.823,222.627,77.272,250.404,83.044,286.627z" style="fill:#ac646b;"></path>
			<path d="M448,286.627H83.044c-5.772-36.224-37.221-64-75.044-64v8c33.4,0,61.232,24.21,66.918,56H8
				c-4.418,0-8,3.582-8,8v24c0,4.418,3.582,8,8,8h8h104h16c4.418,0,8-3.582,8-8c0-4.222,3.74-7.466,7.92-6.869l81.567,11.652
				c14.99,2.142,30.113,3.216,45.255,3.216H448c4.418,0,8-3.582,8-8v-24C456,290.209,452.418,286.627,448,286.627z" style="fill:#55323C;"></path>
			<path d="M168,194.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
				c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.563
				C169.414,194.444,168.703,194.627,168,194.627z" style="fill:#7D5050;"></path>
			<path d="M184,210.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
				c-1.15-0.64-2.473-1.008-3.882-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.564
				C185.414,210.444,184.703,210.627,184,210.627z" style="fill:#7D5050;"></path>
			<path d="M200,226.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.937-3.563
				c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.938,3.563
				C201.414,226.444,200.703,226.627,200,226.627z" style="fill:#7D5050;"></path>
			<path d="M216,242.627c-1.352,0-2.68-0.691-3.43-1.941c-1.141-1.895-0.523-4.352,1.375-5.488l5.938-3.563
				c-1.15-0.64-2.473-1.008-3.883-1.008c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8c0-0.045-0.006-0.089-0.007-0.134l-5.939,3.563
				C217.414,242.444,216.703,242.627,216,242.627z" style="fill:#7D5050;"></path>
			<path d="M171.883,183.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.563l23.78-14.269c0.384-0.23,0.701-0.525,0.976-0.848
				c1.085-1.271,1.308-3.13,0.399-4.641c-1.133-1.895-3.609-2.492-5.484-1.371l-0.579,0.347L171.883,183.635z" style="fill:#55323C;"></path>
			<path d="M187.882,199.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.564l24.226-14.538c0.232-0.139,0.443-0.299,0.636-0.473
				c1.385-1.256,1.74-3.352,0.739-5.015c-1.133-1.902-3.609-2.492-5.484-1.371l-1.025,0.615L187.882,199.635z" style="fill:#55323C;"></path>
			<path d="M203.883,215.635l-5.937,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.938-3.563l23.78-14.269c0.384-0.23,0.701-0.525,0.976-0.848
				c1.085-1.271,1.308-3.13,0.399-4.641c-1.141-1.898-3.602-2.496-5.484-1.371l-0.579,0.347L203.883,215.635z" style="fill:#55323C;"></path>
			<path d="M219.883,231.635l-5.938,3.563c-1.898,1.137-2.516,3.594-1.375,5.488
				c0.75,1.25,2.078,1.941,3.43,1.941c0.703,0,1.414-0.184,2.055-0.57l5.939-3.563l24.061-14.437c0.288-0.173,0.537-0.384,0.764-0.611
				c1.271-1.267,1.578-3.271,0.611-4.877c-1.141-1.898-3.609-2.496-5.484-1.371l-0.859,0.516L219.883,231.635z" style="fill:#55323C;"></path>
		</g>
		</svg>
  </div>
	<div class="productTitle">
		Nimbus Formale
	</div>
	<div class="cost">
		$60.99
	</div>
	<div class="radio-inputs">
  <label class="radio">
    <input checked="" name="radio" type="radio">
    <span class="name">B</span>
  </label>
  <label class="radio">
    <input name="radio" type="radio">
    <span class="name">D</span>
  </label>
      
  <label class="radio">
    <input name="radio" type="radio">
    <span class="name">2E</span>
  </label>
  
  <label class="radio">
    <input name="radio" type="radio">
    <span class="name">4E</span>
  </label>
</div>
	<button class="addtocart">Add to Cart</button>
</div>
<style>
/* From Uiverse.io by aadium - Tags: card, shoe, ecommerce */
.card {
  width: 230px;
  height: 340px;
  background: #131313;
  border: 2px solid #bb6c74;
  border-radius: 40px;
}

.image {
  background-color: #1f1f1fa3;
  border-radius: 2.5em 2.5em 0em 0em;
  width: 100%;
  height: 37%;
  padding: 2px;
}

.image svg {
  width: 75%;
  margin-top: -25px;
  margin-left: 30px;
}

.productTitle {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #bb6c74;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: 10px;
}

.cost {
  text-align: center;
  margin-top: 10px;
  font-weight: bold;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.radio-inputs {
  position: relative;
  margin-top: 20px;
  margin-left: 13px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #1c1c1c;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 200px;
  font-size: 14px;
}

.radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}

.radio-inputs .radio input {
  display: none;
}

.radio-inputs .radio .name {
  display: flex;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: .5rem 0;
  color: #bb6c74;
  transition: all .15s ease-in-out;
}

.radio-inputs .radio input:checked + .name {
  background-color: #000;
  color: #fff;
  font-weight: 600;
}

.addtocart {
  width: 100%;
  margin-top: 19px;
  padding: 15px;
  border: none;
  border-top: 2px solid #bb6c74;
  background-color: #131313;
  color: #bb6c74;
  font-weight: bold;
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border-radius: 0px 0px 38px 38px;
  transition: 0.2s;
}

.addtocart:hover {
  background-color: #bb6c74;
  border-top: 2px solid transparent;
  color: #111111;
}
</style>
